<template>
    <section>
        <el-dialog
                :title="user.id == 0 ? '添加成员' : '编辑成员' "
                :visible.sync="visible"
                :value="value"
                @close="close"
                width="500px"
        >
            <el-form
                    :model="user"
                    :rules="rules"
                    ref="userForm"
            >
                <el-form-item
                        label="姓名"
                        :label-width="labelWidth"
                        prop="realName"
                >
                    <el-input
                            v-model="user.realName"
                            auto-complete="off"
                            maxlength="32"
                            suffix-icon="fa fa-vcard"
                            placeholder="请填写员工姓名"
                    />
                </el-form-item>
                <el-form-item
                        label="手机号码"
                        :label-width="labelWidth"
                        prop="mobile"
                >
                    <el-input
                            v-model="user.mobile"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-mobile"
                            placeholder="请填写用户手机号码"
                    />
                </el-form-item>
                <el-form-item
                        label="性别"
                        :label-width="labelWidth"
                        prop="sex"
                >
                    <el-select
                            v-model="user.sex"
                            placeholder="请选择性别"
                    >
                        <el-option
                                v-for="item in sexes"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                        label="合作社"
                        :label-width="labelWidth"
                        prop="cooperativeId"
                >
                    <el-input
                            v-model="user.cooperativeName"
                            auto-complete="off"
                            suffix-icon="fa fa-mobile"
                            :disabled="true"
                    />
                </el-form-item>
                <el-form-item
                        label="成员角色"
                        :label-width="labelWidth"
                        prop="roleIds"
                >
                    <el-select
                            v-model="user.roleIds"
                            multiple
                            placeholder="请选择成员角色"
                    >
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button
                size="small"
                @click="cancle('userForm')"
        >取 消</el-button>
        <el-button
                size="small"
                type="primary"
                @click="submit('userForm')"
        >确 定</el-button>
      </span>
        </el-dialog>
    </section>
</template>
<style>
</style>
<script>
    import {mapState} from "vuex";

    export default {
        name: "AddAndEdit",
        data() {

            return {
                visible: false,
                labelWidth: "",
                sexes: [],
                memberTypes: [],
                user: {
                    id: 0,
                    mobile: "",
                    realName: '',
                    cooperativeId: '',
                    cooperativeName: '',
                    roleIds: []
                },
                roles: [],
                rules: {
                    realName: [{required: true, message: "请输入姓名", trigger: "blur"}],
                    mobile: [{required: true, validator: this.$validator.mobile, trigger: "blur"}],
                    areas: [{required: true, message: "请选择区域", trigger: "blur"}],
                    sex: [{required: true, message: "请选择性别", trigger: "blur"}],
                    cooperativeId: [{required: true, message: "请选择合作社", trigger: "blur"}],
                    roleIds: [{required: true, message: "请选择成员角色", trigger: "blur"}]
                }
            };
        },
        computed: {
            ...mapState({
                codebooks: state => state.codebooks.codebooks
            })
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler: function (val) {
                    this.visible = val.show;
                    this.labelWidth = val.formLabelWidth || "120px";
                    this.user = val.user;
                    this.loadData();
                }
            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
            console.log(this.codebooks);
            this.sexes = this.codebooks ? this.codebooks.sexs : [];
            this.memberTypes = this.codebooks ? this.codebooks.memberTypes : [];
            //查询角色
            this.$api.role.groupsRoles("5,6", result => {
                this.roles = result.roles;
            })
        },
        methods: {
            closre() {
                this.cancle('userForm');
            },
            cancle(formName) {
                this.visible = false;
                this.user = {
                    id: 0
                };
                this.$refs[formName].clearValidate();
            },
            loadData() {
                if (!this.user || !this.user.id || this.user.id <= 0) {
                    this.$api.cooperative.detail(this.$route.query.id, result => {
                        console.log(result);
                        let cooperative = result.cooperative;
                        this.user = {
                            id: 0,
                            cooperativeId: cooperative.id,
                            cooperativeName: cooperative.name,
                            roleIds: []
                        }
                    });
                    return;
                }
                this.$api.member.detail(this.user.id, result => {
                    let member = result.member;
                    let roles = result.roles;
                    this.user = {
                        id: member.id,
                        realName: member.realName,
                        mobile: member.mobile,
                        sex: member.sex ? member.sex.value : '',
                        cooperativeId: member.cooperativeId,
                        cooperativeName: member.cooperativeName,
                        roleIds: roles.map(item => {
                            return item.id
                        })
                    }
                });
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const callback = () => {
                            this.cancle(formName);
                        };
                        /* this.cooperatives.forEach(item => {
                             if (item.id == this.user.cooperativeId) {
                                 this.user.cooperativeName = item.name;
                             }
                         })*/
                        this.user.id
                            ? this.$api.member.update(this.user, callback)
                            : this.$api.member.save(this.user, callback);
                    } else {
                        return false;
                    }
                });
            }
        },
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        show: false,
                        formLabelWidth: "120px",
                        user: {
                            id: 0,
                            types: []
                        }
                    };
                }
            }
        }
    };
</script>
